<template>
	<view class="level-process" v-if="userInfo">
		<view class="title">
			当前等级
		</view>
		<view class="entry" @click="jump">
			查看进度<i class="iconfont icon-arrow-right"/>
		</view>
		<view class="main">
			<view class="identity">
				{{userInfo.identity}}
			</view>
			<view class="process">
				<view class="process-wrapper">
					<!-- <progress  v-if="isAnimationStart" :percent="60" stroke-width="10" activeColor="#ffffff" backgroundColor="#e27011" active duration="10"/> -->
				</view>
				<!-- <view class="tie-rod" v-if="isAnimationStart"/> -->
			</view>
			<view class="next-level">
				下一等级：{{userInfo.next_identity}}
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,Ref,defineProps,computed,onMounted} from 'vue';
	import {useStore} from 'vuex';
	
	const store = useStore();

	
	const props = defineProps({
		processCount:{
			type:Number,
			default:0,
		}
	})
	
	const isMounted:Ref<boolean> = ref(false);
	
	const direct = computed(()=>{
		if(!store.state.userInfo) return 1;
		return store.state.userInfo.direct
	})
	
	onMounted(()=>{
		setTimeout(()=>{
			isMounted.value = true
		},1000)
	})
	
	const isAnimationStart = computed(()=>{
		return props.processCount>0&&isMounted
	})
	
	const jump = ()=>{
		uni.router.route('/pages/user_level/userLevel')
	}
	

</script>

<style scoped lang="scss">
	@import "./levelProcess.scss";
</style>